<template>
  <div v-if="editOpen" style="width: 100%;">
    <t-table
      rowKey="id"
      :data="data"
      :columns="columns"
      bordered
      hover
      :selected-row-keys="selectedRowKeys"
      @select-change="(val)=>{selectedRowKeys=val}"
    >
      <template #id="{rowIndex}">
        {{ rowIndex + 1 }}
      </template>
      <template #name="{ row }">
        <t-link @click="dialog.objId=row.idCard;dialog.header=row.name;dialog.open_detail=true" hover="color" theme="primary">{{ row.name }}</t-link>
      </template>
      <!--        <template #name="{row}">-->
      <!--          <t-input clearable v-model="row.name"></t-input>-->
      <!--        </template>-->
      <!--        <template #company="{row}">-->
      <!--          <t-input clearable v-model="row.company"></t-input>-->
      <!--        </template>-->
      <template #duty="{row}">
        <div v-if="['99999',''].includes(row.profTit)">
          {{ row.duty }}
        </div>
        <div v-else>
          {{ row.duty }}/{{ row.profTitId | filterByTree(profTitOptions) }}({{ row.profTit | filterByDict(dict.type.prof_tit) }})
        </div>
      </template>

      <!--        <template #phone="{row}">-->
      <!--          <t-input clearable v-model="row.phone"></t-input>-->
      <!--        </template>-->
      <!--        <template #email="{row}">-->
      <!--          <t-input clearable v-model="row.email"></t-input>-->
      <!--        </template>-->
      <!--        <template #op="{row}">-->
      <!--          <t-icon size="large" v-if="row.name&&row.company&&row.duty&&row.profTit&&row.phone&&row.email" style="color: green" name="check-circle-filled"></t-icon>-->
      <!--          <t-icon size="large" v-else style="color: red" name="close-circle-filled"></t-icon>-->
      <!--        </template>-->
    </t-table>
    <div style="margin-top: 10px" class="btn-group-inline">
      <t-button :disabled="this.data.length>=10" @click="addData">新增</t-button>
      <t-button @click="upData">上移</t-button>
      <t-button @click="downData">下移</t-button>
      <t-button @click="updateData">修改</t-button>
      <t-button @click="delData">删除</t-button>
    </div>
    <add-edit-member @addData="addData2" :data="data" @updateData="updateData2" :editOpen="dialog.editOpen" :rowIndex="rowIndex"
                     :oldData="oldData" :header="dialog.header" :objId="dialog.objId"
                     :visible.sync="dialog.open" v-if="dialog.open"></add-edit-member>
  </div>
  <div v-else style="width: 100%;">
    <t-table
      rowKey="id"
      :data="value"
      :columns="columns2"
      bordered
      hover
    >
      <template #id="{rowIndex}">
        {{ rowIndex + 1 }}
      </template>
      <template #name="{ row }">
        <t-link @click="dialog.objId=row.idCard;dialog.header=row.name;dialog.open_detail=true" hover="color" theme="primary">{{ row.name }}</t-link>
      </template>
      <template #duty="{row}">
        <div v-if="['99999',''].includes(row.profTit)">
          {{ row.duty }}
        </div>
        <div v-else>
          {{ row.duty }}/{{ row.profTitId | filterByTree(profTitOptions) }}({{ row.profTit | filterByDict(dict.type.prof_tit) }})
        </div>
      </template>
    </t-table>
    <member-all-detail :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_detail" v-if="dialog.open_detail"></member-all-detail>

  </div>
</template>

<script>
import AddEditMember from "./add-edit-member.vue";
import memberAllDetail from "@/pages/common/system/components/member-all-detail.vue";

export default {
  name: "innovation-member",
  dicts: ['duty', 'prof_tit'],
  components: {
    AddEditMember,
    memberAllDetail
  },
  props: {
    value: Array,
    editOpen: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      profTitOptions: [],
      rowIndex: null,
      oldData: {},
      dialog: {
        open_detail: false,
        open: false,
        header: '',
        objId: null,
        editOpen: false
      },
      selectedRowKeys: [],
      data: [],
      columns: [
        {
          colKey: 'row-select',
          type: 'single',
          title: "选择",
          width: 64,
          // checkProps: ({row,rowIndex}) => ({disabled: rowIndex === 0}),
        },
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 80
        },
        {
          colKey: "name",
          title: "姓名",
          align: "center",
          width: 100
        },
        {
          colKey: "idCard",
          title: "身份证号",
          align: "center",
          width: 200
        },
        {
          colKey: "company",
          title: "工作单位",
          align: "center",
          width: 300
        },
        {
          colKey: "duty",
          title: "职务/职称",
          align: "center",
          width: 220
        },
        {
          colKey: "phone",
          title: "手机",
          align: "center",
        },
        {
          colKey: "email",
          title: "邮箱",
          align: "center",
        },
        // {
        //   colKey: "op",
        //   title: "填写状态",
        //   align: "center",
        //   width: 120
        // },
      ],
      columns2: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 80
        },
        {
          colKey: "name",
          title: "姓名",
          align: "center",
          width: 100
        },
        {
          colKey: "idCard",
          title: "身份证号",
          align: "center",
          width: 200
        },
        {
          colKey: "company",
          title: "工作单位",
          align: "center",
          width: 300
        },
        {
          colKey: "duty",
          title: "职务/职称",
          align: "center",
          width: 220
        },
        {
          colKey: "phone",
          title: "手机号",
          align: "center",
        },
        {
          colKey: "email",
          title: "邮箱",
          align: "center",
        },
        // {
        //   colKey: "op",
        //   title: "填写状态",
        //   align: "center",
        //   width: 120
        // },
      ]
    }
  },

  watch: {
    data: {
      immediate: true,
      handler(val) {
        const newData = this.data.map((val, index) => ({...val, sort: index + 1}))
        this.$emit("input", newData);
      }
    },
    value: {
      immediate: true,
      handler(val) {
        if(val && val.length>0){
          const newArr = val.map(data=> ({
            ...data,
            initType: 'init'
          }))
          // 防止无限循环，简单比较一下
          if (JSON.stringify(val) !== JSON.stringify(this.data)) {
            this.data = newArr
          }
        }
      }
    },
  },
  created() {
    this.getProfTitTreeSelect();
  },
  methods: {
    getProfTitTreeSelect() {
      return this.$api.system.profTit.treeselect().then(response => {
        this.profTitOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    addData() {
      this.dialog.header = '新增主要完成人';
      this.oldData = {};
      this.dialog.editOpen = false;
      this.rowIndex = null;
      this.dialog.open = true;
    },
    addData2(data) {
      if (this.data.length >= 10) {
        this.$message.warning("主要完成人不超过10人");
        return;
      }
      const newId = Number(new Date().getTime()) + Number(Math.random() * 10)
      this.data.push({...data,id: newId})
    },
    upData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[0].id === this.selectedRowKeys[0]) {
        this.$message.warning("已是第一行");
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
        this.moveInArray(this.data, index, index - 1)
      }
    },
    downData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[this.data.length - 1].id === this.selectedRowKeys[0]) {
        this.$message.warning("已是最后一行");
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
        this.moveInArray(this.data, index, index + 1)
      }
    },
    updateData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
      this.rowIndex = index;
      Object.assign(this.oldData, this.data[index])
      this.dialog.editOpen = true;
      this.header = "修改主要完成人";
      this.dialog.open = true;
    },
    updateData2(data, rowIndex) {
      this.$set(this.data, rowIndex, data)
    },
    delData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
      this.data.splice(index, 1)
      this.selectedRowKeys = [];
    },
    moveInArray(arr, ffrom, to) {
      // 删除当前的位置
      const item = arr.splice(ffrom, 1);
      // 确保还剩有元素移动
      if (!item.length) {
        this.$message.warning(`There is no item in the array at index ${ffrom}`);
      }
      // 移动元素到指定位置
      arr.splice(to, 0, item[0]);
    },
  }
}
</script>

<style scoped>

</style>
